<template>
  <div>
    <List border size="small">
      <ListItem v-for="(e,i) in list" :key="i">
        {{e.filename}}
        <span
          style="color: #999;font-size: 12px;margin-left: 20px;"
        >-- {{e.singername}}</span>
        <a @click="play(e)">播放</a>
      </ListItem>
    </List>
  </div>
</template>

<script>
import api from '../utils/api'

export default {
  props: {
    musicName: String
  },
  data () {
    return {
      list: []
    }
  },
  watch: {
    musicName: function () {
      this.seach()
    }
  },
  mounted () {
    this.seach()
  },
  methods: {
    seach () {
      let that = this
      api.kugouSeach(this.musicName, (res) => {
        that.list = res.data.data.info
      })
    },
    play (e) {
      api.musicUrl(e.hash, e.album_id, (res) => {
        let data = res.data.data
        let el = {
          title: data.album_name,
          artist: data.author_name,
          src: data.play_url,
          pic: data.img
        }
        this.$store.commit('music/select', el)
      })
    }
  }
}
</script>

<style scoped>
</style>